Visual Studio Code插件

#vscode

VSCode 插件

前端相关插件

Vue 插件

Vetur

VUE 是时下最流行的 js 框架之一，很多公司都会选择基于 VUE 来构建产品，Vetur 对 VUE 提供了很好的语言支持。

可识别 .vue 文件

没有安装该插件之前之前编写后缀名为 .vue 的文件时代码是白色的

安装插件后编写 vue 文件输入 s，按 Tab 键就可以自动补全模版。

`Vscode-element-helper`

使用 element-ui 库的可以安装这个插件，编写标签时自动提示 element 标签名称。

Open-in-browser 在浏览器中查看

VS Code 没有提供直接在浏览器中运行程序的内置功能，所以我们需要安装此插件，在浏览器中查看我们的程序运行效果。

Live Server 实时预览

安装这个插件之后，我们在编辑器中修改代码，按 Ctrl+S 保存，修改效果就会实时同步，显示在浏览器中，再不用手动刷新。

HTML Preview（George Oliveira）

预览 html
安装好之后，fn+f 1 打开菜单，输入 html: ，即可看到所有可用命令。也可以直接在 html 文件上右键，也会有 open preview 和 show in browser 命令

Open Preview
Open Preview to the side
Open Locked Preview to the Side

`Auto Close Tag` 自动闭合标签

输入标签名称的时候自动生成闭合标签，特别方便。

`Auto Rename Tag` 尾部闭合标签同步修改

自动检测配对标签，同步修改。

`Improt Cost` 成本提示

这个插件可以在你导入工具包的时候提示这个包的体积，如果体积过大就需要考虑压缩包，为后期上线优化做准备。

Version Lens 工具包版本信息

在 package.json 中显示你下载安装的 npm 工具包的版本信息，同时会告诉你当前包的最新版本。

使用：在 package.json 的右上角点击 V 显示依赖信息

Remote - SSH

CTRL+SHIFT+P，remote-ssh:open ssh configuration file…

配置 SSH

# Read more about SSH config files: https://linux.die.net/man/5/ssh_config
Host tencentClound
    HostName 43.159.135.247
    User hacket
    IdentityFile ~/.ssh/id_rsa


# 完整的.ssh/config配置
Include ~/.orbstack/ssh/config 

Host github.com
   User git
   Hostname github.com
   IdentityFile ~/.ssh/id_rsa
  
Host gitee.com
   User git
   Hostname gitee.com
   IdentityFile ~/.ssh/id_ed25519_gitee

Host gitlab.com
   User git
   Hostname gitlab.com
   IdentityFile ~/.ssh/id_ed25519

Host tencentClound
    HostName 43.159.135.247
    User hacket
    IdentityFile ~/.ssh/id_rsa

config 文件中，包括三行：